import MyTable from "@/components/MyTable";
import SearchHeader from "@/components/SearchHeader";
import useTable from "@/hooks/useTable";
import { Button, Form, Popconfirm, message } from "antd";
import { useMemo } from "react";
import { useConfig } from "./form.config";
import Add from "./Add";
import { useBoolean, useRequest } from "ahooks";
import ButtonGroup from "@/components/ButtonGroup";
import { delRoom } from "@/services/room/room";
import { OrderStatusEnum } from "@/constants/enum";
import { editAccommodationStatus, getAccommodationPage } from "@/services/Accommodation/accommodation";
import CheckModal from './CheckModal';
import dayjs from "dayjs";

export default () => {
  const config = useConfig();
  const [form] = Form.useForm();
  const [open, { toggle: toggleOpen }] = useBoolean(false);
  const [checkOpen,{toggle:toggleCheckOpen}] = useBoolean(false);
  const { tableProps, reset, submit, refresh } = useTable(
    getAccommodationPage,
    {
      defaultFormValues: {},
      form: form,
    }
  );
  const { run: editStatus } = useRequest(editAccommodationStatus, {
    manual: true,
    onSuccess: () => {
      message.success("退房成功");
      refresh();
    },
  });

  const columns = useMemo(() => {
    return [
      {
        title: "客户姓名",
        dataIndex: "customerName",
      },
      {
        title: "客户电话",
        dataIndex: "tel",
      },
      {
        title: "房间号",
        dataIndex: "roomNum",
      },
      {
        title: "金额(元)",
        dataIndex: "houseCosts",
      },
      {
        title: "入住状态",
        dataIndex: "accomStatus",
        render: (r: any) => OrderStatusEnum[r],
      },
      {
        title: "入住时间",
        dataIndex: "stayTime",
        render:(r)=>dayjs(r).format("YYYY-MM-DD"),
      },
      {
        title: "退房时间",
        dataIndex: "checkoutTime",
        render:(r)=>dayjs(r).format("YYYY-MM-DD"),
      },

      {
        title: "操作",
        dataIndex: "action",
        align: "center",
        render: (_: any, record: any) => {
          const { accommodationRecordsId, accomStatus } = record;
          return (
            <ButtonGroup>
              {accomStatus === 2 && (
                <Popconfirm
                  placement="topLeft"
                  title={"确认退房吗？"}
                  okText="确认"
                  cancelText="取消"
                  onConfirm={() => editStatus({
                    accommodationRecordsId,
                    accomStatus:4
                  })}
                >
                  <Button type="link">退房</Button>
                </Popconfirm>
              )}
            </ButtonGroup>
          );
        },
      },
    ];
  }, []);

  return (
    <>
      <div style={{ marginBottom: "16px" }}>
        <SearchHeader
          configs={config}
          form={form}
          onSubmit={submit}
          onReset={reset}
        />
      </div>

      <MyTable
        top={
          <div style={{display:"flex",gap:"12px"}}>
            <Button onClick={() => toggleOpen()} type="primary">
              办理入住
            </Button>
            <Button onClick={() => toggleCheckOpen()} >
              核验订单
            </Button>
          </div>
        }
        rowKey={"accommodationRecordsId"}
        columns={columns}
        {...tableProps}
      />
      <Add open={open} refresh={refresh} close={() => toggleOpen()} />
      <CheckModal open={checkOpen} refresh={refresh} close={()=>toggleCheckOpen()} />
    </>
  );
};
